{layout name="layout" /}
<!-- Styles -->
<style>
    g[aria-labelledby="id-66-title"]{
        display: none;
    }
    #chartdiv {
      width: 100%;
      height: 500px;
    }
    
    </style>
    
    <!-- Resources -->
    <script src="/js/core.js"></script>
    <script src="/js/charts.js"></script>
    <script src="/js/animated.js"></script>
    
    <!-- Chart code -->
    <script>
    am4core.ready(function() {
    
    // Themes begin
    am4core.useTheme(am4themes_animated);
    // Themes end
    
    /**
     * Define data for each year
     */
    // { "sector": "Agriculture", "size": 6.6 },
    //     { "sector": "Mining and Quarrying", "size": 0.6 },
    //     { "sector": "Manufacturing", "size": 23.2 },
    //     { "sector": "Electricity and Water", "size": 2.2 },
    //     { "sector": "Construction", "size": 4.5 },
    //     { "sector": "Trade (Wholesale, Retail, Motor)", "size": 14.6 },
    //     { "sector": "Transport and Communication", "size": 9.3 },
    //     { "sector": "Finance, real estate and business services", "size": 22.5 } 
   
    var chart = am4core.create("chartdiv", am4charts.PieChart);
    chart.dataSource.url = "/admin/user/myData";
    
    // chart.data = [
    //   { "sector": "Agriculture", "size": 6.6 },
    //   { "sector": "Mining and Quarrying", "size": 0.6 },
    //   { "sector": "Manufacturing", "size": 23.2 },
    //   { "sector": "Electricity and Water", "size": 2.2 },
    //   { "sector": "Construction", "size": 4.5 },
    //   { "sector": "Trade (Wholesale, Retail, Motor)", "size": 14.6 },
    //   { "sector": "Transport and Communication", "size": 9.3 },
    //   { "sector": "Finance, real estate and business services", "size": 22.5 }
    // ];
    
    // Add label
    chart.innerRadius = 100;
    var label = chart.seriesContainer.createChild(am4core.Label);
    label.text = "申请数据";
    label.horizontalCenter = "middle";
    label.verticalCenter = "middle";
    label.fontSize = 40;
    chart.innerRadius = am4core.percent(40);
    
    // Add and configure Series

    var pieSeries = chart.series.push(new am4charts.PieSeries());
    // pieSeries.labels.template.disabled = true;
    // pieSeries.ticks.template.disabled = true;
    pieSeries.dataFields.value = "litres";
    pieSeries.dataFields.category = "country";
    pieSeries.dataFields.value = "size";
    pieSeries.dataFields.category = "sector";
    // pieSeries.slices.template.tooltipText = "";

    // Add a legend
    chart.legend = new am4charts.Legend();
    // Animate chart data
    // var currentYear = 1995;
    // function getCurrentData() {
    //   label.text = currentYear;
    //   var data = chartData;
    //   currentYear++;
    //   if (currentYear > 2014)
    //     currentYear = 1995;
    //   return data;
    // }
    
    function loop() {
      //chart.allLabels[0].text = currentYear;
    //   var data = getCurrentData();
    //   for(var i = 0; i < data.length; i++) {
    //     chart.data[i].size = data[i].size;
    //   }
      chart.invalidateRawData();
      chart.setTimeout( loop, 4000 );
    }
    
    loop();
    
    }); // end am4core.ready()
    
    </script>
    
    <div id="chartdiv"></div>
